<template>
	<view class="login">
        <navBar :showLeft="true" navTitle="授权登录" bgColor="" textcolor="#000" :leftBg="false"></navBar>
		<view class="logo">
			<image src="/static/images/dazhi.png"></image>
		</view>
        <view class="ones" v-if="isCanUse != 1">
            <view class="title">
                <p>微信授权</p>
            </view>
            <view class="title" style="color: #ccc;">
                <p>
                    我们需要获取您的用户信息授权以<br/>关联您的账号
                </p>
            </view>
            <view class="operation">
                <button class="button" type="default" @click="getuser">确认授权</button>
                <button class="button" type="default" @click="homes">跳过,暂不授权</button>
            </view>
        </view>
        
        <view class="twos" v-if="isCanUse == 1">
            <view class="title">
                <p>欢迎登录</p>
            </view>
            <view class="operation">
				  <button style="background-color: #be831d;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信手机号快捷登录</button>
            </view>
            <view class="end">
                <p><span>手机号快速注册</span>丨<span>账号登录</span></p>
            </view>
        </view>
        
        
	</view>
</template>

<script>
    import navBar from "../commponent/public/register.vue"
	import {
		setUserInfo,
		setToken,
	} from "../../utils/auth";
	export default {
		data() {
			return {
				code:'',
				isCanUse:'',
			};
		},
        components:{
            navBar
        },
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that=this
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let that=this
			uni.login({
			  provider: 'weixin',
			  success: function (loginRes) {
			    console.log('code',loginRes.code);
				that.code=loginRes.code
			    // 获取用户信息
			  }
			});
			this.isCanUse = uni.getStorageSync("isCanUse");
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
             getuser(){
			 let _this = this;
			 uni.getUserProfile({
				desc:'Wexin',     // 这个参数是必须的
				success:res=>{
				 console.log("用户信息",res)
				 _this.setData({
				  nickName: res.rawData.nickName,
				  //昵称
				  avatarUrl: res.rawData.avatarUrl //头像
				 });
				 setUserInfo(res.userInfo); //模拟存储用户信息
				 try {
				  uni.setStorageSync('isCanUse', 1); //记录是否第一次授权  false:表示不是第一次授权

				 } catch (e) {
				   console.log('缓存失败');
				 }
				 uni.navigateTo({
				 	url: '/pages/login/warrant'
				 })
				}
			   })
			},
			homes(){
				uni.switchTab({
				 url: '/pages/views/tabBar/home'
				});
			},
			 getPhoneNumber(e) {  
				console.log(e)
				let that=this
				
				  that.myrequest('data/api.wxapp/decode', {
				  	iv:e.detail.iv,
					encrypted:e.detail.encryptedData,
					code:that.code,
				  }).then(res => {
				  	console.log('手机号', res)
					  uni.setStorageSync('phone', res.data.phoneNumber);
					  uni.setStorageSync('expire', res.data.watermark.timestamp);
					   setTimeout(() => {
						   uni.showToast({
						     title: '登陆成功',
						     icon: 'none'
						   });
					     uni.switchTab({
					       url: '/pages/views/tabBar/home'
					     });
					   }, 1500);
				  })
				  // uni.login({
				  //   provider: 'weixin',
				  //   success: function (loginRes) {
				  //     console.log(loginRes.code);
				  // 	 that.myrequest('data/api.wxapp/session', {
				  // 		 code:loginRes.code
				  // 	 }).then(res => {
				  // 	 	console.log('解密see',res)
				  // 	 	setToken(res.data.token.token)
				  // 	 })
				  //     // 获取用户信息
				  //   }
				  // });
				 
			}  
		}
	};
</script>
<style scoped lang="scss">
	.login {
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		transition: all 0.6s ease-in-out;
		// background-color: #333;
	}

	.logo image {
		height: 160upx;
		width: 160upx;
		display: block;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 150upx;
	}
    // 微信授权字
    .title{
        width: 100%;
        margin-top: 20rpx;
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .operation{
        width: 80%;
        margin: 0 auto;
    }
    .operation button{
        margin: 30rpx 0;
        color: white;
    }
    
    .operation button:first-child{
        background-color: #be831d;
    }
    .operation button:last-child{
        background-color: #d0cccd;
    }
    .end{
        display: flex;
        justify-content: center;
        
    }
    .end p{
        position: absolute;
        bottom: 5%;
    }
    
        
</style>
